<template>
  <div class="modal">
    <Button theme="button" @click="toggleModal">切换</Button>
    <dui-modal
      v-model:visible="visible"
      :backdropClose="true"
      size="sm"
      :confirm="confirm"
      :cancel="cancel"
    >
      <template v-slot:title>
        <div>这里是标题</div>
      </template>
      <template v-slot:content>
        <div>这里是内容</div>
      </template>
    </dui-modal>

    <h2>另一种打开方式</h2>
    <Button theme="button" @click="showModal">Show modal</Button>
  </div>
</template>

<script lang="ts">
import { h, ref } from 'vue'
import duiModal from '../dui/modal/Modal.vue';
import { openModal } from '../dui/modal/openModal';

export default {
  components: { duiModal },
  setup (props, context) {
    const visible = ref(false);
    const toggleModal = () => {
      visible.value = !visible.value;
    }

    const confirm = () => {
      
    }

    const cancel = () => {
      return true;
    }

    const showModal = () => {
      // h函数渲染一个虚拟dom
      const content = h('div', { className: 'dui-modal-content' }, 'dom元素');
      openModal({
        title: 'title',
        content,
        backdropClose: false,
        confirm,
        cancel,
      });
    }

    return { visible, toggleModal, confirm, cancel, showModal }
  }
}
</script>

<style lang="scss" scoped>

</style>